<template>
  <div class="main article">
    <Info></Info>
    <div class="show-all" :class="{darkArticle:darkTheme}">
      <div>
        <div class="empty-msg" v-show="!parseArticleList.length">文章列表为空！</div>
        <el-card class="box-card" v-for="(item,index) in parseArticleList" :key="index" shadow="hover">
          <h3 class="title" @click="goDetail(index)">{{item.title}}
            <div class="time"><i class="el-icon-time"></i>{{item.date}}</div>
          </h3>
          <!-- <button>{{index}}</button> -->
          <div class="readmore" @click="goDetail(index)">
            <el-button type="primary" size="mini" plain>展开全文</el-button>
          </div>
          <div class="taglist">
            <i class="el-icon-collection"></i>
            <el-tag v-for="(tagitem,tagindex) in item.tag" :key="tagindex"  size="mini" class="tag">
              {{tagitem}}
            </el-tag>
          </div>
        </el-card>
      </div>
      
    </div>
    <div class="pagenav" :class="{darkPageNav:darkTheme}">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="articleNum"
            :page-size="perSize"
            :current-page="curIndex"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
  </div>
</template>


<script>
import Info from './Info';
// import uri from '@/config/uri';
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
  data(){
    return {  
    }
  },
  components:{
    Info
  },
  computed:{
    ...mapState("article",["curIndex","articleNum","perSize","articleList"]),
    ...mapState("common",["darkTheme"]),
    ...mapGetters("article",["parseArticleList"]),
  },
  methods:{
    ...mapMutations("article",["setCurIndex","setArticleNum","setPerSize"]),
    ...mapActions("article",["loadAllArticles"]),

    handleCurrentChange(val){
      this.setCurIndex(val)
    },
    fetchArticleList(){
      this.loadAllArticles()
    },
    goDetail(index) { 
       //利用文章在当前页的index（[0,1,2.....pageSize-1]）和当前页数计算出文章在tmplist的下标
      let realIndex = ((this.curIndex-1)*this.perSize)+index
      this.$router.push("/page/" + realIndex);
    },
  },
  beforeMount(){
  
    // if(!this.parseArticleList){ //没有缓存的情况下，加载一份完整的
      this.fetchArticleList()
    // }
  },
  updated(){
    // if(!this.articleList.length){  //已修改，因为localstorage结合vuex可以保存状态，无需用updated监听，
      // this.fetchArticleList()
    // }
  },
  // watch:{ 
  //   '$store.state.common.tmpSearchList':function(){
  //     this.tableData = this.$store.state.common.tmpSearchList
  //     // this.total = 1 //无论搜索结果多少，都展示在一页：规避了一个棘手的问题：没有把页面渲染用到的数据，和点击搜索再获取的数据，归并到一个对象里
  //     if(this.tableData.length>0){
  //       this.total = Math.ceil(this.tableData.length/this.pagesize)
        
  //     }else{
  //       this.total = 0
  //     }
  //     this.current = 1
  //   }
  // }
}
</script>

<style lang="scss">
.article{
  margin-top: 80px;
  height: 600px;
  position: relative;
}

.show-all{
  position: absolute;
  right: 0;
  width: 880px;
  background-color: aliceblue;
  height: 580px;
  overflow-y: auto;
  // height: 8000px;
  box-sizing: border-box;
  padding: 20px;
  .el-card__body{
    height: 100%;
    position: relative;
  }
  .empty-msg{
      font-size: 40px;
      position: absolute;
      left: 0;
      top: 40%;
      right: 0;
      color: #c6d2ea;
      width: 100%;
  }
  .box-card {
    width: 100%;
    height: 118px;
    margin-bottom: 20px;
    cursor: pointer;
    .title{
      border-left: 3px solid #409EFF;
      text-align: left;
      text-indent: 1em;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      transition: all .5s;
      &:hover{
        color: #409EFF;
      }
      // background: linear-gradient(45deg,aqua,white)
      .time{
        font-size: 14px;
        font-weight: normal;
        width: 150px;
        i{
          margin: 0 5px;
        }
      }
    }
   
    .taglist{
      position: absolute;
      bottom: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      i{
        // font-weight: bold;
        font-size: 18px;
        color: #409EFF;
        margin-right: 10px;
      }
      .tag{
        margin: 0 5px;
      }
    }
    .readmore{
      position: absolute;
      right: 50px;
      bottom: 50px;
      // font-size: 20px;
      font-family: serif;
      font-style: italic;
    }
    
  }
  
}
.pagenav{
    position: absolute;
    left: 270px;
    right: 0;
    bottom: -30px;
}

// 暗夜主题
.darkArticle{
  background-color: #263c4f;
  box-shadow: 0 0 10px rgb(61 122 132 / 50%);
  .box-card{
    background: #263c4f;
    color: #2196f3;
    box-shadow: 0 0 10px rgb(61 122 132 / 50%);
    border:1px solid #2196f3;
    .title:hover{
      color: aqua;
    }
  }
  .el-tag{
    // color: #FFF;
    color: aqua;
    background: rgba(61, 122, 132, 0.5);
    border-color: #409EFF;
    // border-radius: 0;
  }
  .el-button--primary.is-plain{
    color: #FFF;
    background: rgba(61, 122, 132, 0.5);
    border-color: #409EFF;
    &:hover{
      background: #607d8b;
      
      // color: #eaf1aa;
      color: aqua;
    }
  }
}
/*分页器*/ 
.darkPageNav{
  .el-pagination.is-background .el-pager li{
    background-color: #263c4f;
    border: 1px solid #607d8b;
    color: #c6d2ea;
  }
  .el-pagination.is-background .el-pager li:hover{
    border: 1px solid #2196f3;
    color: #2196f3;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #263c4f;
    border: 1px solid #2196f3;
    color: #2196f3;
  }
  .el-pagination.is-background .btn-next{
    background-color: #263c4f;
     border: 1px solid #2196f3;
     color: #409EFF;
  }
  .el-pagination.is-background .btn-next:disabled{
    border: 1px solid #607d8b;
    color: #c6d2ea;
  }
  .el-pagination.is-background .btn-prev{
    background-color: #263c4f;
     border: 1px solid #2196f3;
     color: #409EFF;
  }
  .el-pagination.is-background .btn-prev:disabled{
    border: 1px solid #607d8b;
    color: #c6d2ea;
  }
}
</style>
